<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
    <script
        type="text/javascript"
        src="../vue.js"
    ></script>
        <style>
            * {
                margin: 10px;
            }

            .demo1 {
                background-color: aquamarine;
            }
            .box1{
                background-color: cornflowerblue;
            }
            .box2{
                background-color: orange;
                padding: 5px;
            }
        </style>
    </head>


    <body>

        <!--vue中的事件修饰符：
        1.prevent：阻止默认事件（常用）
        2.stop：阻止事件冒泡（常用）
        3.once：事件只触发一次（常用）
        4.capture：使用事件的捕获模式(事件捕获是由外到内的，此时不处理事件/事件冒泡是由内到外的，此时开始处理事件）
        5.self：只有event.target是当前操作的元素是才触发事件
        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

        7.支持链式调用

        -->
        <div id="part1">
            <h1>hello,{{name}}</h1>
            <!--阻止默认事件（常用）-->
            <a href="../../HTML/htmlDemo.html" @click.prevent="showInfo">跳转链接</a>
            <!--阻止事件冒泡-->
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息</button>
            </div>
            <!--事件只触发一次（常用）-->
            <button @click.once="showInfo">点我提示信息</button>

            <!--使用事件的捕获模式-->
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">
                    div2
                </div>
            </div>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                data() {
                    return {
                        name: "Marina",
                        address: 'xxx',
                    }
                },
                methods: {
                    showInfo(e) {
                        alert("准备跳转到HTML demo界面")
                    },
                    showMsg(num) {
                        console.log(num)
                    },
                }
            })
            vm.$mount("#part1");

        </script>
    </body>
</html>